<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>crossdomain | Access-Control-Allow-Origin</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<style>
	body, button{
		font-family: Verdana, Arial;
		color: #333;
	}
	h1{
		text-align:center;
		font-size:24px;
	}
	</style>
</head>
<body>
	<h1>crossdomain using Access-Control-Allow-Origin</h1>
	<button id='get_resource'>Click to get resource</button>
	<p id='resource_holder'></p>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
	<script>
	$('#get_resource').click(function(){
		var $holder =$('#resource_holder'),
			 url = 'http://www.b.com/crossdomain/access-control/resouce.php';
		if(window.XDomainRequest){
			var xdr = new XDomainRequest();
			xdr.open("get", url);
			xdr.send();     
			xdr.onload = function(){
				$holder.html(xdr.responseText);
			}
		}else{
			$.get(url,function(data){
					$holder.html(data);
				}
			);
		}
	});
	</script>
</body>
</html>
